<template>
	<view>
		<my-search @focus="toSearch"></my-search>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
			<swiper-item v-for="(v, i) in banners" :key="i">
				<view class="swiper-item">
					<image :src="v.image" mode="heightFix" class="swiper-image"></image>
				</view>
			</swiper-item>
		</swiper>

		<view class="list">
			<!-- <navigator :url="'/pages/detail/detail?id=' + v.id" v-for="(v, i) in list" :key="i"> -->
				<list-item :item="v" v-for="(v, i) in list" :key="i" @click="toDetail(v.id)">
					<view slot="desc">{{ v.desc }}</view>
				</list-item>
			<!-- </navigator> -->
		</view>
	</view>
</template>

<script>
	import tabBarMixins from '../../mixins/tabBar-mixins.js'
	export default {
		mixins: [tabBarMixins],
		data() {
			return {
				banners: [],
				list: [],
				page: 1,
				total: 0
			};
		},
		onLoad() {
			this.getBanners()
			this.getList()
		},
		onReachBottom() {
			// 滑动到底部 请求下一个数据
			// 0. 是否存在下一页面数据
			if (this.list.length >= this.total) return;
			// 1. 页码 + 1
			this.page++;
			// 2. 请求数据
			this.getList()
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			},
			async getList() {
				// 0. 提示的loading
				uni.showLoading({
					title: '数据拼命加载中...'
				})
				// 1. 发送请求
				const [error, resp] = await uni.request({
					url: 'http://localhost:3000/list',
					data: {
						_page: this.page
					}
				})
				// 0. 关闭弹框
				uni.hideLoading()
				// 2. 判断是否失败
				if (error) return uni.showToast({
					title: '请求报错～',
					icon: 'none'
				});
				// 3. 设置数据
				this.list = this.list.concat(resp.data)
				this.total = resp.header['X-Total-Count']
			},
			getBanners() {
				uni.request({
					url: 'http://localhost:3000/banners',
					method: 'GET',
					success: resp => {
						console.log(resp.data)
						this.banners = resp.data;

					}
				})
			},
			toSearch() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		height: 400rpx;

		.swiper-item {
			.swiper-image {
				width: 100%;
				height: 400rpx;
			}
		}
	}
</style>
